<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./main.css">
    <link rel="icon" href="./img/favicon/wedding_rings_icon_144595.ico" size="16x16" type="icon" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="preload" href="https://fonts.googleapis.com">
    <link rel="preload" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&display=swap&family=Marck+Script&family=Pacifico&family=Bad+Script&display=swap">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <!-- <meta property="og:image" content="https://img.banket.ru/service/portfolio/31692/lina-larina-58d4e22f2fd9e.jpg"> -->
    <!-- <meta property="og:image" content="https://catherineasquithgallery.com/uploads/posts/2021-12/1639740524_107-catherineasquithgallery-com-p-rozovii-fon-svadebnii-243.jpg"> -->
    <meta property="og:title" content="Приглашение на свадьбу Олега и Ксении"/>
    <meta property="og:image" content="http://oleg-ksenia.ru/img/555555.png">
    <meta property="og:image:secure_url" content="http://oleg-ksenia.ru/img/555555.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="200">
    <meta property="og:image:height" content="200">
    <meta property="og:description" content="Ждем Вас 27 июля в 15:00">
    <meta name="robots" content="noindex, nofollow">
    <meta name="color-scheme" content="light">
    <title>Сайт-приглашение на свадьбу Олега и Ксении</title>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=dccf1668-a334-4154-9a8d-55dd302bef91&lang=ru_RU" type="text/javascript">
    </script>
</head>
<body>
    <section class="start-view" id="start">
        <div class="start-view__container">
                      <!-- <img class="bird animate__animated animate__flipInY" src="/img/img_bird2.png">
                      <h1 class="animate__animated animate__fadeInDown">Рады пригласить вас на нашу свадьбу!</h1>
                      <img class="ok animate__animated animate__zoomIn" src="/img/OK-var9_new.png">
                      <h1 class="animate__animated animate__fadeInUp">27 июля 2024</h1> -->
            <!-- <img class="bird" src="./img/img_bird2.png"> -->
            <img class="bird" src="./img/555555.png">
            <h1 id="start-text">Рады пригласить Вас на нашу свадьбу!</h1>
            <!-- <img class="ok" src="./img/OK-var10_1.png"> -->
            <!-- <img class="ok" src="./img/OK-var12_2.png"> -->
            <img class="ok" src="./img/OK-gold-3 (1).png">
            <h1 id="start-date"><span class="jule">июль</span> <span class="number">27</span> <span  class="jule">2024</span></h1>
        </div>
        <!-- <div class="img">
            <img class="img__left_top" src="./img/pion.jpeg">
        </div> -->
        <!-- <div class="img_2">
            <img class="img__bottom" src="./img/left_img.png">
        </div> -->
        <div class="timer-container">
            <div class="timer">
                <div class="timer-inner"><span id="days">00</span><span id="end-word-day">дней</span></div>
                <div class="timer-inner"><span id="hours">00</span><span id="end-word-hour">часов</span></div>
                <div class="timer-inner"><span id="minutes">00</span><span id="end-word-min">минут</span></div>
                <div class="timer-inner"><span id="seconds">00</span><span id="end-word-sec">секунд</span></div>
            </div>
        </div>
    </section>

    <div class="container-main">
          <!-- дорогие родные -->
          <section class="greetings" id="greetings">
            <!-- <div class="family-img"></div> -->
            <div class="family-text">
              <h1 id="dear">Дорогие родные и близкие!</h3>
              <!-- <p id="dear-text">Совсем скоро в нашей жизни произойдет очень важное событие – наша свадьба!<br>Мы верим и надеемся, что этот день станет красивым началом долгой и счастливой жизни. <br><br>Позвольте пригласить вас разделить с нами радость этого дня. Подарите свою поддержку и добрые пожелания, а мы в свою очередь поделимся частичкой нашего счастья.</p> -->


              <!-- <p id="dear-text">Скоро наступит очень важный для нас день – мы станем семьей!<br>Этот день станет началом нашей долгой и счастливой семейной жизни.<br>Этот теплый июльский вечер мы будем счастливы провести в кругу самых близких и родных людей, в праздничной и одновременно душевной атмосфере.</p> -->

              <p id="dear-text">Совсем скоро в нашей жизни произойдет очень важное событие – наша свадьба! С каждым мгновением нашей любви мы осознаем, какое чудо мы обрели друг в друге.<br><br>В этот особенный день, наполненный нежностью и романтикой, позвольте пригласить Вас, чтобы вместе создать незабываемые моменты, которые будут жить в наших сердцах вечно.</p>
            </div>
          </section>

          <!-- место проведения  -->
          <section class="place" id="place">
              <h1 class="place__main">
                  Место проведения
              </h1>
              <p class="place__text">
                Альянс Бородино - Ресторан "Давыдов"
              </p>
              <p class="place__text">
                  <a href="https://yandex.ru/maps/-/CDRknGL1?no-distribution=1&amp;source=wizbiz_new_map_single" target="_blank" rel="noopener"><i>Русаковская ул., 13, стр. 5</i></a>
              </p>
              <div id="map" style="width: 100%; height: 400px"><span class="map-text">Чтобы переместить карту, <br>проведите по ней двумя пальцами</span></div>
          </section>

          <!-- дата проведения -->
          <section id="date">
            <div class="date-text">            
              <h1 id="dateh1">Дата проведения</h1>
              <!-- календарь  -->
              <table cellpadding="5" id="calendar1">
                <thead>
                  <tr><td colspan="7">
                  <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
                <tbody>
              </table>
            </div>
              <div class="add-to" id="add">
                <p>Добавить в календарь</p>

                <a target="_blank" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=Свадьба+Олег+и+Ксения&amp;dates=20240727T120000Z/20240727T200000Z&amp;details=<h2>Дополнительная+информация+доступна+на+<a target=`_blank` href=https://oleg-ksenia.ru>сайте</a></h2>&amp;location=Русаковская+ул.,+13,+стр.+5&amp;sprop=&amp;sprop=name:oleg-ksenia.ru"><img src="./svg/google.svg" alt="google-calendar"></a>
                <!-- <a target="_blank" href="https://www.addevent.com/event/mz20501734+apple"><img src="./svg/mac.svg"></a> -->
                <a target="_blank" href="./events/event.ics"><img src="./svg/mac.svg" alt="apple-calendar"></a>
                <a target="_blank" href="https://www.addevent.com/event/mz20501734+office365"><img src="./svg/365.svg" alt="office365-calendaar"></a>
                <a target="_blank" href="./events/event.ics"><img src="./svg/outlook.svg" alt="outlook-calendar"></a>
                <a target="_blank" href="https://www.addevent.com/event/mz20501734+yahoo"><img src="./svg/yahoo.svg" alt="yahoo-calendar"></a>

  <!-- 
                <a target="_blank" href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text=Свадьба Олег и Ксения&amp;dates=20240727T150000Z/20240727T205500Z&amp;details=&amp;location=&amp;sprop=&amp;sprop=name:"><img src="https://www.google.com/calendar/images/ext/gc_button1_ru.gif"></a> -->
              </div>        
          </section>

          <section id="time">
            <div class="day-time">
              <h1 id="time-h1">Расписание дня</h1>
              <div class="img-wrapper"></div>
              <img class="img-time-start" src="./img/myarr2.png" alt="vektor_img">
              <div class="day-time__inner"><span id="first-time">00:00</span><span class="empty-span"></span><span class="d-t-text">Сбор гостей и фуршет</span></div>
              <div class="day-time__inner"><span  id="second-time">00:00</span><span class="empty-span"></span><span class="d-t-text">Свадебный ужин</span></div>
              <div class="day-time__inner"><span  id="third-time">00:00</span><span class="empty-span"></span><span class="d-t-text">Праздничный торт</span></div>
              <div class="day-time__inner"><span  id="four-time">00:00</span><span class="empty-span"></span><span class="d-t-text">Окончание вечера</span></div>
              <!-- <div class="day-time__inner"><span  id="five-time">00:00</span><span class="empty-span"></span><span class="d-t-text">Окончание вечера</span></div> -->
          </div>
          </section>

          <section class="chat" id="chat">
            <div class="chat-main">
              <h1 id="chat-h1">Общий чат</h1>
              <!-- <p id="chat-text">Для Вашего удобства мы создали чаты в WhatsApp и Telegram. После свадьбы эти чаты будут использованы для обмена фотографиями. Присоединяйтесь и будем на связи!</p> -->
              <p id="chat-text">Дорогие гости! Мы создали группы в WhatsApp и Telegram, куда можно будет добавлять фото со свадьбы. Давайте поделимся друг с другом счастливыми моментами этого важного дня!</p>

              <!-- <p id="chat-text">Для вашего удобства мы создали чаты в Telegram и WhatsApp, куда можно будет добавлять фото со свадьбы и узнавать изменения. Давайте поделимся друг с другом счастливыми моментами этого важного дня и будем на связи!</p> -->
              <div class="btn-main-wrapper">
                <button class="btn" id="btn-telegram"><a target="_blank" href="https://t.me/+ZSwVwGIfAXI5OGZi"><span class="inner-social"><img class="img-social" src="./img/tg_white.png"><span>группа telegram</span></span></a>
                  <div class="btn-wrap">
                    <div class="btn-effect">
                    </div>
                  </div>
                </button>
                <button class="btn" id="btn-whatsapp"><a target="_blank" href="https://chat.whatsapp.com/JksiuBkDveyEBCcSRnOu6J"><span class="inner-social"><img class="img-social" src="./img/wa_white.png"><span>группа whatsapp</span></span></a>
                  <div class="btn-wrap">
                    <div class="btn-effect">
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </section>

          <section class="color-wedding" id="color-wed">
            <div class="main_label">Несколько просьб</div>
            <div class="color-wrapper">
              <h1 class="color-h1 label_wed">Про дресс-код</h1>
              <div class="hidden">
                <p class="color-p">Для нас главное- Ваше присутствие!<br>Мы будем рады, если Вы поддержите цветовую гамму нашего торжества при выборе своих нарядов</p>
                <div class="color-img-wrap">
                  <img class="color-img" src="./img/first_color.png" alt="персиковый цвет">
                  <img class="color-img" src="./img/second_color.png" alt="розовый цвет">
                  <img class="color-img" src="./img/three_color.png" alt="светлый">
                  <img class="color-img" src="./img/four_color_1.png" alt="зеленый">
                </div>
              </div>
              <!-- <p  class="color-p">Девушки: коктейльные платья, такие, как будто вы собираетесь на самую крутую вечеринку!</p>
              <p  class="color-p">Мужчины: черный или серый костюм, светлая рубашка, туфли.</p> -->
            </div>
            <div class="color-wrapper">
              <h1 class="label_wed">Про цветы</h1>
              <div class="hidden">
                <p class="color-p">Пожалуйста, не дарите нам живые цветы. <br>Мы не успеем насладиться их красотой до отъезда в свадебное путешествие.<br>Прекрасной альтернативой цветам будет лотерейный билетик или бутылочка вашего любимого вина.</p>
              </div>
            </div>
            <div class="color-wrapper">
              <h1 class="label_wed">Про парковку</h1>
              <div class="hidden">
                <p class="color-p">На территории имеется парковка. Для бронирования места просим заранее сообщить марку и номер автомобиля</p>
              </div>
            </div>
          </section>

    </div>
    <section class="quiz" id="quiz">
      <div class="quiz-text">
        <h1 id="quiz-h1">До встречи в июле!</h1>
        <p id="quiz-p">Ваши ответы на вопросы помогут нам при организации торжества.<br>Будем очень признательны, если Вы сообщите нам о своём решении до 01.07.2024.</p>
        <div class="btn-main-wrapper">
          <button class="done btn"><span>Я приду</span>
            <div class="btn-wrap">
              <div class="btn-effect">
              </div>
            </div>
          </button>
          <button class="btn-not">Не смогу прийти
          </button>
        </div>
      </div>
    </section>
    
    <!-- модальное окно с опросом  -->
    <div class="popup__wrapper">
      <div class="popup" id="popup-form">
        <div class="first-form">
          <div class="popup-img"><img src="./img/img_1.jpg"></div>
          <div class="first-form-wrapper" id="success-message">
            <div class="first-form__header">Спасибо!</div>
            <div class="first-form__text" >
              <p>Ваши ответы отправлены.</p>
            </div>
          </div>
          <div class="first-form-wrapper" id="error-message">
            <div class="first-form__header">Ошибка...</div>
            <div class="first-form__text" >
              <p>Сообщение не отправлено. Попробуйте еще раз.</p>
            </div>
          </div>
          <div class="first-form-wrapper" id="main-form-visible">
            <div  class="first-form__header">Анкета гостя</div>
            <div class="first-form__text">
              <p>Мы хотим, чтобы свадьба прошла идеально не только для нас, но и для Вас. Пожалуйста, заполните небольшой опросник по банкетному меню.</p>
            </div>
            <!-- <iframe src="https://forms.yandex.ru/u/65dc6d6243f74f03b963527d/?iframe=1" frameborder="0" name="ya-form-65dc6d6243f74f03b963527d" width="350"></iframe> -->
            <form class="form" type="submit">
              <div class="form-come">
                <select name="select" id="come">
                  <option value="Приду один" selected="selected">Приду один / одна</option>
                  <option value="Буду с парой / семьей">Буду с парой / семьей</option>
                </select>
              </div>
              <div class="form-food wrapperOuter">
                <p id="selectEat">Какое блюдо предпочитаете?</p>
                <ul>
                  <li>
                    <input class="inp-radio" type="radio" id="meat" name="food" value="Блюдо из мяса">
                    <label for="meat">Блюдо из мяса</label>
                    
                    <div class="check inside"></div>
                  </li>
                  
                  <li>
                    <input class="inp-radio"  type="radio" id="fish" name="food" value="Блюдо из рыбы">
                    <label for="fish">Блюдо из рыбы</label>
                    
                    <div class="check inside"></div>
                  </li>
                  
                  <li>
                    <input class="inp-radio"  type="radio" id="just" name="food" value="Вегетарианское блюдо">
                    <label for="just">Вегетарианское блюдо</label>
              
                    <div class="check inside"></div>
                  </li>
                </ul>
              </div>
              <div class="form-drink wrapperOuter">
                <p>Какой предпочитаете алкоголь?</p>
                <ul>
                  <li>
                    <input type="checkbox" id="red-wine" name="drink" value="Красное вино">
                    <label for="red-wine">Красное вино</label>

                    <div class="select"></div>
                  </li>
                  <li>
                    <input type="checkbox" id="white-wine" name="drink" value="Белое вино">
                    <label for="white-wine">Белое вино</label>

                    <div class="select"></div>
                  </li>
                  <li>
                    <input type="checkbox" id="silent-wine" name="drink" value="Игристое вино">
                    <label for="silent-wine">Игристое вино</label>

                    <div class="select"></div>
                  </li>
                  <li>
                    <input type="checkbox" id="wisky" name="drink" value="Крепкий алкоголь">
                    <label for="wisky">Крепкий алкоголь</label>

                    <div class="select"></div>
                  </li>
                  <li>
                    <input type="checkbox" id="no-alco" name="drink" value="Алкоголь пить не буду">
                    <label for="no-alco">Алкоголь пить не буду</label>

                    <div class="select"></div>
                  </li>
                </ul>  
              </div>
              <div class="name-guest">
                <label for="first-last-name">Ваше имя и фамилия</label>
                <input id="first-last-name" type="text" name="name" required placeholder="Иван Николаев">
              </div>
              <div class="inp-btn">
                <input type="submit" id="submit"  value="Отправить">
                <div class="inp-wrap">
                  <div class="inp-effect">
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="popup" id="popup-form3">
        <div class="first-form">
          <div class="popup-img"><img  src="./img/img_1.jpg"></div>
          <div class="first-form-wrapper">
            <div class="first-form__text"><p id="message-dont-go">Заполните, пожалуйста, форму, чтобы мы знали, что у вас не получится прийти.</p></div>
            <form class="form" id="form-dont-go" type="submit">
              <div class="name-guest">
                <label for="no-first-last-name">Ваше имя и фамилия</label>
                <input id="no-first-last-name" type="text" name="name" required placeholder="Иван Николаев">
              </div>
              <div class="inp-btn">
                <input type="submit" id="submit-second"  value="Отправить">
                <div class="inp-wrap">
                  <div class="inp-effect">
                  </div>
                </div>
              </div>
            </form>
        </div>
          <!-- <iframe src="https://forms.yandex.ru/u/65f2d27973cee767fd21d210/?iframe=1" frameborder="0" name="ya-form-65f2d27973cee767fd21d210" width="350"></iframe>         -->
        </div>
      </div>
      <div class="popup-close">
        <span></span>
      </div>
    </div>

    <!-- Menu-->
    <div class="menu-wrapper">
    </div>
    <nav class="menu">
        <div class="container1">
            <div class="menu-burger__header">
                <span></span>
            </div>
            <ul class="topmenu">
                <!-- <li><a href="#start" class="a">главная</a></li>
                <li><a href="#greetings" class="a">приглашение</a></li> -->
                <!-- <li><a href="" class="a">Производственные мощности</a></li> -->
                <li><a href="#place" class="a">место проведения</a></li>
                <li><a href="#date" class="a">дата проведения</a></li>
                <li><a href="#time" class="a">расписание дня</a></li>
                <li><a href="#chat" class="a">общий чат</a></li>
                <li><a href="#color-wed" class="a">дресс-код</a></li>
                <li><a href="#color-wed" class="a">цветы</a></li>
                <li><a href="#quiz" class="a">подтвердить присутствие</a></li>
                <li><a href="#add" class="a">добавить в календарь</a></li>
                <li>            
                  <div class="share">Поделиться
                    <a target="_blank"  href="https://wa.me/?text=https://oleg-ksenia.ru"><img class="share-wa" alt="WhatsApp" src="./img/wa_white.png">
                    </a>
                    <a target="_blank"  href="https://telegram.me/share/url?url=https://oleg-ksenia.ru"><img class="share-tg" alt="Telegram" src="./img/tg_white.png">
                    </a>
                  </div>
                </li>
            </ul>
            <div class="img-bottom">
              <img src="./img/flow.png" alt="flowers">
            </div>
        </div>
    </nav>

    <script src="./js/index.js"></script>
    <script src="https://forms.yandex.ru/_static/embed.js"></script>
    <script src="./js/burgMenu.js"></script>
    <script src="./js/maps.js"></script>
    <script src="./js/calendar.js"></script>
    <script src="./js/timerBack.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/tg.js"></script>
    <script src="./js/message.js"></script>
    <script src="./js/animationTime.js"></script>
    <script src="./js/accordeon.js"></script>
    <script src="./js/addTo.js"></script>
  </body>
</html>
